<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>服务器列表</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}" />
    <script src="{{ url_for('static', filename='layui.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery-3.7.1.min.js') }}"></script>
    <meta http-equiv="Refresh" content="30";/>
</head>
<body>
<!-- 导入header.html -->
{% include 'header.html' %}
<br />
<div id="page">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">服务器列表</div>
                    <div class="layui-card-body">
                        <table id="serverTable" style="width:100%;border:1px;text-align: left">
                            <thead>
                                <th>服务器ip</th>
                                <th>最后更新时间</th>
                                <th>状态</th>
                            </thead>
                            <tbody>
                            {% for row in serverlist %}
                                <tr>
                                    <td>{{ row['ip'] | safe }}</td>
                                    <td>{{ row['lasttime'] | safe }}</td>
                                    <td>{{ row['status'] | safe }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var $table = $('#serverTable');

function updateTable(data) {
  $table.empty();
  $table.append('<thead><tr><th>服务器ip</th><th>最后更新时间</th><th>状态</th></tr></thead>');
  var $tbody = $('<tbody></tbody>');
  $.each(data, function(index, item) {
      console.log(item);
    var $row = $('<tr></tr>');
    $row.append('<td>' + item.ip + '</td>');
    $row.append('<td>' + item.lasttime + '</td>');
    $row.append('<td>' + item.status + '</td>');
    $tbody.append($row);
  });
  $table.append($tbody);
}

setInterval(function() {
    $.ajax({
        url: '/get_hostlist_data',
        method: 'GET',
        success: function (data) {
            console.log(data);
            dataobj=JSON.parse(data);
            updateTable(dataobj);
        }
    });
}, 5000)
</script>
</body>
</html>